<template>
  <!-- router  不建议用router  影响刷新打开默认路由 -->
  <!-- 
    如果当前路由路径是根路由，则将default-active设置为$route.path，否则将default-active设置为去掉第一个字符后的路由路径
    :default-active="$route.path === '/' ? $route.path : $route.path.substring(1)" 
  -->

  <!--        router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径，字符串，绝对路径 　　　　　　　　
　　　　　　　　unique-opened只允许有一个下拉菜单处于打开的状态 　　　　　　　　
　　　　　　　　使用default-active来实现当前菜单激活的选项     
　　　　　　　　default-openeds当前打开的 sub-menu 的 index 的数组 
              :default-openeds="defaultOpeneds" 页面刷新后保持当前导航打开

  -->
  <el-menu
    :default-active="router.currentRoute.value.meta.level"
    class="el-menu-vertical-demo"
    :unique-opened="true"
    :default-openeds="defaultOpeneds"
  >
    <template v-for="item in menu">
      <!-- 如果有子集 -->
      <template v-if="item.children && item.children.length > 0">
        <el-sub-menu
          :key="item.meta.id"
          :index="item.meta.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
        >
          <template #title>
            <i :class="[item.meta?.icon]"></i>
            <!-- 添加空格 表示下级-->
            <span> {{ generateSpaces(item.meta.level) }}</span>
            <span slot="title"> {{ item.meta.name }}</span>
          </template>
          <MenuTree
            :menu="item.children"
            :default-active="router.currentRoute.value.meta.level"
            @clickItem="clickItemHandle"
          />
        </el-sub-menu>
      </template>
      <!-- 如果没有子集 -->
      <template v-else>
        <el-menu-item
          :key="item.meta.id"
          :index="item.meta.level"
          :disabled="item.meta?.disabled"
          :popper-append-to-body="false"
          @click="clickItemHandle(item)"
        >
          <i :class="[item.meta?.icon]"></i>
          <!-- 添加空格 表示下级-->
          <span> {{ generateSpaces(item.meta.level) }} </span>
          <span slot="title">{{ item.meta.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
   
  <script  name="MenuTree" setup>
// 把下面代码变成setup语法糖的形式
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const isRenderMenu = ref(true);

// router是全局路由对象
let router = useRouter();
// 获取全部路由
// route是当前路由对象
let route = useRoute();
// console.log(
//   router.currentRoute,
//   "router567",
//   router.currentRoute.value.meta.id
// );
// 获取菜单栏每一项展开数组
const arr = router.currentRoute.value.meta.level.split("-");
// 获取菜单栏每一项展开数组
const functionOpeneds = (e) => {
  let arr = ref([]);
  for (let i = 0; i < e.length; i++) {
    if (e.length - i > 0) {
      let b = e.slice(0, e.length - i).join("-");
      arr.value.push(b);
    }
  }
  return arr.value.splice(1);
};
const defaultOpeneds = functionOpeneds(arr);

// type 为了方便写成这样 可以根据自己项目设定type
defineProps({
  menu: {
    type: Array,
    required: true,
    default: () => [],
  },
  // defaultActive: {
  //   type: String,
  //   required: true,
  //   default: [],
  // },
});

const emit = defineEmits(["update-active-path", "clickItem"]);

// 返回的空格字符串 用于显示菜单层级
const generateSpaces = (level) => {
  let str = "";
  level
    .split("")
    .filter((it) => it != "-")
    .forEach(() => {
      str += "　";
    });
  return str;
};

// 点击当前菜单项
const clickItemHandle = (item) => {
  emit("clickItem", item);
};
</script>
   
  <style scoped lang="scss">
</style>